<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<!-- 未绑定 -->
		<view class="class1" v-if="!alreadyAuthentication">
			<view class="notice">
				<span>!温馨提示：姓名、身份证号与收款账户实名必须一致</span>
				<span>否则无法提现成功</span>
			</view>
			<view class="input">
				<span>姓名</span>
				<input type="text" placeholder="请输入真实姓名" 
				placeholder-class="placeholder-class">
			</view>
			<view class="input">
				<span>身份证号</span>
				<input type="text" placeholder="请输入身份证号">
			</view>
			<button>提交</button>
		</view>
		<!-- 已绑定过 -->
		<view class="class2" v-else>
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/0d19fc8f-d1c0-411e-8a3d-e50ad4ebc70c.png" mode="scaleToFill"></image>
			
			<span>改证件已经绑定手机号{{phoneNum}}</span>
			<span>若要换绑手机号需获取原手机号验证码进行解绑</span>
			<view class="verificationCode">
				<input type="text" maxlength="6" v-model="verifyCode" placeholder="请输入验证码">
				<button @click="verifyCodeSend?null:popupShow=true" :style="verifyCodeSend?'background: #D9D9D9;color: #FFFFFF;':''">{{verifyCodeSend?'获取验证码（'+restTime+')':"获取验证码"}}</button>
			</view>
			<button>确认修改</button>
			<view class="">
				<u-popup mode="center" :show="popupShow" :closeable="true" @close="close">
					<view class="check">
						<span>请输入图形校验码</span>
						<view class="input">
							<input type="text" v-model="checkCode" placeholder="请输入校验码">
							<view class="checkImg">
								<image src="@/subpageA/static/img/my_slices/assets/personalIdentity.png" mode="scaleToFill"></image>
							</view>
							<image src="@/subpageA/static/img/my_slices/assets/Frame@2x-2.png" mode="scaleToFill"></image>
						</view>
						<button @click="sendVerifyCode">获取验证码</button>
					</view>
				</u-popup>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				alreadyAuthentication:true,		//已认证？
				phoneNum:"180*******19",		//手机号码
				
				popupShow:false,				//显示校验弹出层？
				checkCode:'',					//图形校验码
				
				verifyCode:'',					//短信验证码
				verifyCodeSend:false,				//验证码是否发送
				restTime:0,						//验证码重发倒计时
			}
		},
		methods: {
			close(){
				this.popupShow=false;
			},
			sendVerifyCode(){
				//发送验证码
				if(!this.verifyCodeSend){
					this.verifyCodeSend=true;
					this.restTime=60;
					
					let timer=setInterval(()=>{
						this.restTime--;
						if(this.restTime===0){
							this.verifyCodeSend=false;
							clearInterval(timer);
						}
					},1000)
				}
				this.popupShow=false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;
		.class1{
			
			.notice{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10rpx;
				
				background: rgba(242, 174, 107, 0.2);
				span{
					display: inline-block;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFA858;
				}
			}
			
			.input{
				margin: 0 32rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				border-bottom: 1px solid  #F5F5F5;
				span{
					display: inline-block;
					width: 120rpx;
					font-size: 14px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
				input{
					width: 500rpx;
					padding-left: 32rpx;
				}
				
			}
			
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 686rpx;
				height: 96rpx;
				margin: 32rpx;
				margin-top: 96rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			
		}
		
		
		.class2{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image{
				margin: 100rpx 0 32rpx;
				width: 128rpx;
				height: 128rpx;
			}
			>span{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			.verificationCode{
				display: flex;
				margin-top: 32rpx;
				input{
					width: 400rpx;
					height: 96rpx;
					padding-left: 32rpx;
					background: #F3F7F8;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}
				>button{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					height: 96rpx;
					background: #08C8BD;
					border-radius: 16rpx;
					font-size: 16px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 686rpx;
				height: 96rpx;
				margin-top: 96rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			
			.check{
				width: 662rpx;
				padding: 32rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #FFFFFF;
				>span{
					
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #001A18;
				}
				.input{
					display: flex;
					justify-content: center;
					align-items: center;
					input{
						width: 300rpx;
						height: 96rpx;
						padding-left: 20rpx;
						background: #F3F7F8;
						border-radius: 16rpx 0 0 16rpx;
					}
					
					.checkImg{
						display: flex;
						justify-content: center;
						align-items: center;
						height: 96rpx;
						width: 196rpx;
						background: #F3F7F8;
						>image{
							width: 180rpx;
							height: 80rpx;
							transform: translateY(-32rpx);
						}
					}
					>image{
						width: 32rpx;
						height: 32rpx;
						transform: translate(20rpx,-32rpx);
					}
				}
			
				>button{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 598rpx;
					height: 96rpx;
					margin: 32rpx 0 0;
					background: #08C8BD;
					border-radius: 16rpx;
					font-size: 16px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			
			}
		}
		
		
		
	}
</style>
